<!-- myNotify -->
<template>
        <!-- 卡片 -->
        <!-- <el-card class="box-card el-card-flex"> -->
            <!-- 表格 -->
    <div style="height:100%">
        <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
            <el-form-item style="float:right">
                <el-button type="primary" @click='handleTaskAdd()' plain>
                    分配人员
                    <i class="el-icon-plus"></i>
                </el-button>
            </el-form-item>
        </el-form>
        <div class="el-flex el-box-column" style="clear: both;height:90%;">
            <el-table border height="100%" :data="tableData" stripe ref="tableData">
                <el-table-column prop="adminEmpName" min-width="100px" label="姓名" align="center" sortable
                    show-overflow-tooltip></el-table-column>
                <el-table-column prop="adminPhoneNo" min-width="100px" label="手机号" align="center" sortable
                show-overflow-tooltip></el-table-column>
                <!-- <el-table-column prop="taskCode" min-width="100px" label="部门" align="left" sortable
                    show-overflow-tooltip></el-table-column> -->
                <el-table-column prop="orgName" min-width="100px" label="管理范围" align="left" sortable
                show-overflow-tooltip></el-table-column>
                <el-table-column prop="control" align="center" label="操作" width='110px'>
                    <template slot-scope="scope">
                    <el-button class="td-btn-icon" type="text" title="编辑" @click='handleTaskEdit(scope.$index, scope.row)' icon="el-icon-edit"></el-button>
                        <el-button class="td-btn-icon" type="text" title="删除" @click.native.prevent="deleteRow(scope.$index, scope.row)" icon="el-icon-delete"></el-button>
                    </template>
                </el-table-column>
                
            </el-table>
        </div>
                
        <el-dialog
        :title="dialogAppTitle"
        :visible.sync="dialogAppVisible"
        :before-close="handleClose" 
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="35%"
        >
            <el-form ref="formData" label-width="130px" :model="formData">
                <el-form-item label="用户:" prop="adminEmpName" :rules="[{required: true,message: '请选择用户',trigger: 'change'}]">
                    <el-col :span="16">
                        <!-- <el-input v-model="formData.keywords" placeholder="最多可输入20字" auto-complete="off"></el-input> -->
                        <el-input placeholder="请选择用户" v-model="formData.adminEmpName" readonly>
                            <i v-show="formData.adminEmpName" slot="suffix" @click="clearAdminName" class="el-input__icon el-icon-circle-close" style="cursor: pointer;"></i>
                            <el-button slot="append" icon="el-icon-search" @click="principalPeople"></el-button>
                        </el-input>
                        <!-- <el-tag
                        v-for="tag in adminEmpArr"
                        :key="tag.name"
                        closable
                        size="medium"
                        >
                        {{tag.name}}
                        </el-tag>
                        <el-button size="small" plain @click="principalPeople">+ 添加</el-button> -->
                    </el-col>
                </el-form-item>
                <el-form-item label="管理会议室范围:" prop="adminOrgId" :rules="[{required: true,message: '请选择管理会议室范围'}]">
                    <el-col :span="20">
                        <!-- <el-input placeholder="请选择管理会议室范围" v-model="formData.orgName" readonly>
                            <i v-show="formData.orgName" slot="suffix" @click="clearprincipalName" class="el-input__icon el-icon-circle-close" style="cursor: pointer;"></i>
                            <el-button slot="append" icon="el-icon-search" @click="principalOrg"></el-button>
                        </el-input> -->
                        <!-- adminOrgArr -->
                        <el-tag
                        v-for="tag in adminOrgArr"
                        :key="tag.name"
                        closable
                        size="medium"
                        @close="Close(tag)"
                        >
                        {{tag.name}}
                        </el-tag>
                        <el-button size="small" plain @click="principalOrg">+ 添加</el-button>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleCheck('formData')">
                确定
                <!-- <i class="el-icon-document-checked el-icon--right"></i> -->
                </el-button>
                <el-button @click="handleClose('formData')">
                取消
                <!-- <i class="el-icon-refresh-left"></i> -->
                </el-button>
            </span>
        </el-dialog>
        <selectPersonnelDalog
        :schedulePersonList="peopleArr"
        :dialogPersonnelVisible="dialogprincipalVisible"
        :multiple="false"
        @dialogEmployeesData="dialogprincipalCheckSure"/>
        <selectOrg
        :schedulePersonList="adminOrgArr"
        :dialogPersonnelVisible="dialogOrgVisible"
        :multiple="true"
        @dialogEmployeesData="dialogOrgCheckSure"></selectOrg>
    </div>
            
        <!-- </el-card> -->
    </template>
    <script>
        import {
            Tree,
            Dialog,
            Table,
            TableColumn,
            Pagination,
            MessageBox,
            Message,
            Tag,
            Upload,
            Drawer
        } from 'element-ui';
        import {
            taskList, //列表数据
        } from '@/api/missionCenter/missionCenter.js'
        import {
            adminList, //列表数据
            addAdmin, //人员分配
            getAdmin, //获取分配详情
            upAdmin, //修改人员
            delAdmin, //删除人员
        } from '@/api/conference/Initialize.js'
        import selectPersonnelDalog from "@/components/selectPersonnel"
        import selectOrg from '../selectOrg'
        export default {
            name: 'location',
            components: {
                'el-tree': Tree, //树形菜单
                'el-dialog': Dialog, //对话框
                'el-table': Table, //表格
                'el-table-column': TableColumn, //表格列
                'el-pagination': Pagination, //分页
                'el-tag': Tag, //标签
                'el-upload': Upload,
                'el-drawer': Drawer,
                selectPersonnelDalog,
                selectOrg
            },
            data() {
                return {
                    pageSize: 20,
                    total: 0,
                    currentPage: 1,
                    tableData:[],
                    dialogAppVisible: false,
                    dialogAppTitle:'分配人员',
                    formData:{
                        adminEmpName:'',
                        adminOrgId:'',
                        adminPhoneNo:'',
                        adminUserId:'',
                        orgName:'',
                        adminId:'',
                        
                    },
                    dialogprincipalVisible:false, //选择人员
                    dialogOrgVisible: false, //选择组织
                    peopleArr:[],
                    adminOrgArr:[]
                };
            },
            
            created() {
                this.getTabTree()
                window.onresize = () => {
                    this.$refs.tableData.doLayout()
                }
            },
            methods: {
                getTabTree(){
                  adminList({}).then(res => {
                    if(res.data.code == 10000){
                      this.tableData = res.data.data.records
                    }
                  }).catch(res => {
                    resolve([])
                  })
                },
                //分配人员
                handleTaskAdd(){
                    this.dialogAppVisible = true;
                    this.dialogAppTitle = '分配人员'
                },
                //编辑
                handleTaskEdit(index,row){
                    this.dialogAppVisible = true;
                    this.dialogAppTitle = '编辑设备'
                    getAdmin(row.adminId).then((res)=>{
                        if(res.data.code == 10000){
                            this.formData = res.data.data;
                            this.peopleArr.push({
                                empName:this.formData.adminEmpName,
                                personName: this.formData.adminEmpName,
                                userId:this.formData.adminUserId
                            })
                            let orgid = this.formData.adminOrgId.split(',')
                            let orgname = this.formData.orgName.split(',')
                            for(let i=0;i<orgid.length;i++){
                                this.adminOrgArr.push({
                                    name:orgname[i],
                                    id:orgid[i],
                                    valName:orgname[i],
                                    propertyCat:orgid[i]
                                })
                            }
                            
                        }
                    })
                },
                //删除
                deleteRow(index,row){
                    var id = row.adminId
                    MessageBox.confirm('您是否确定删除选中内容', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    .then(() => {
                        delAdmin(id).then(res => {
                        if(res.data.code == 10000){
                            Message({
                            type: 'success',
                            message: '删除成功'
                            });
                             this.getTabTree()
                        }else{
                            // Message({
                            //     type: 'error',
                            //     message: res.data.msg
                            // });
                        }
                        
                        }).catch(res => {
                        
                        })
                    })
                },
                
                //确定按钮
                handleCheck(formName){
                    let id = [],name = []
                    this.adminOrgArr.forEach((v)=>{
                        id.push(v.id)
                        name.push(v.name)
                    })
                    this.formData.adminOrgId = id.join(',')
                    this.formData.orgName = name.join(',')
                    
                    this.$refs[formName].validate((valid)=>{
                        if(valid){
                            if(!this.formData.adminId){
                                addAdmin({
                                    adminEmpName: this.formData.adminEmpName,
                                    adminOrgId: this.formData.adminOrgId,
                                    adminPhoneNo: this.formData.adminPhoneNo,
                                    adminUserId: this.formData.adminUserId
                                }).then((res)=>{
                                    if(res.data.code == 10000){
                                        Message({
                                            type: 'success',
                                            message: '新增成功'
                                        });
                                        this.handleClose('formData')
                                        this.getTabTree()
                                    }
                                })
                            }else{
                                upAdmin({
                                    adminEmpName: this.formData.adminEmpName,
                                    adminOrgId: this.formData.adminOrgId,
                                    adminPhoneNo: this.formData.adminPhoneNo,
                                    adminUserId: this.formData.adminUserId,
                                    adminId: this.formData.adminId
                                }).then((res)=>{
                                    if(res.data.code == 10000){
                                        Message({
                                            type: 'success',
                                            message: '修改成功'
                                        });
                                        this.handleClose('formData')
                                        this.dialogAppVisible = false;
                                        this.getTabTree()
                                    }
                                })
                            }
                        }
                    })
                },
                handleClose(formName){
                    this.dialogAppVisible = false;
                    this.$refs['formData'].resetFields();
                    this.formData.adminId = '';
                    this.formData.adminOrgId = ''
                    this.formData.adminPhoneNo = ''
                    this.formData.adminUserId = ''
                    this.formData.orgName = ''
                    this.formData.adminEmpName = ''
                    this.peopleArr = [],
                    this.adminOrgArr = []
                },
                /*跳转到新增功能路由组件*/
                handleDetails(index,row) {
                    //this.multiRouters是全局提供的自动添加多级路由的方法
                    sessionStorage.lookTaskId = row.taskId;
                    sessionStorage.lookshowTab = '我参与的';
                    this.$router.addRoutes(this.multiRouters([{
                        path: 'notifyLook',
                        name: 'notifyLook', //自定义name名称
                        component: () => import('@/views/thematicPortal/missionCenter/myNotify_look'),
                        meta: {
                            title: '办理'
                        }
                    }]));
                    this.$router.push(this.routerMatch({
                        name: "notifyLook", //顶部导航+侧边导航
                        params: {
                            row: row
                        }
                    }))
                },
               
                //人员弹框
                principalPeople(){
                    this.dialogprincipalVisible = true;
                    if(this.formData.adminEmpName == ''){
                        this.peopleArr = []
                    }
                },
                dialogprincipalCheckSure(data){
                    this.dialogprincipalVisible = false
                    if (!data) {
                    return
                    }
                    this.formData.adminEmpName = data[0].empName
                    this.formData.adminUserId = data[0].userId
                    this.formData.adminPhoneNo = data[0].mobileNo
                    this.peopleArr.push({
                        empName:this.formData.adminEmpName,
                        personName: this.formData.adminEmpName,
                        userId:this.formData.adminUserId
                    })
                },
                clearAdminName(){
                    this.formData.adminEmpName = ''
                    this.formData.adminUserId = ''
                },
                //组织弹框
                principalOrg(){
                    this.dialogOrgVisible = true
                },
                dialogOrgCheckSure(data){
                    this.dialogOrgVisible = false
                    if (!data) {
                        return
                    }
                    var orgname = [],orgid = [];
                    this.adminOrgArr = []
                    data.forEach((v)=>{
                        orgname.push(v.orgName)
                        orgid.push(v.orgId)
                        this.adminOrgArr.push({
                            name:v.orgName,
                            id:v.orgId,
                            valName: v.orgName,
                            propertyCat: v.orgId
                        })
                    })
                    this.formData.orgName = orgname.join(',')
                    this.formData.adminOrgId = orgid.join(',')
                },
                Close(tag) {
                    this.adminOrgArr.splice(this.adminOrgArr.indexOf(tag), 1);
                },
                clearprincipalName(){
                    this.formData.orgName = ''
                    this.formData.adminOrgId = ''
                },
                handleSizeChange(val) { //每页条数
                  this.pageSize = val;
                  this.getTabTree(this.formInline)
                },
                handleCurrentChange(val) { //当前页数
                  this.currentPage = val;
                  this.getTabTree(this.formInline)
                },
            }
        };
    </script>
          
<style lang="scss" scoped>
    .el-card__body {
        position: relative;
    }
    
    .pagination.el-pagination {
        position: absolute;
        bottom: 5px;
        left: 15px;
    }
    
    .el-form-tag {
        margin-bottom: 8px !important;
    }
    
    .el-form-tag .el-tag {
        margin-bottom: 10px;
        margin-left: 0 !important;
        margin-right: 10px !important;
    }
    .el-input:not(.el-input--suffix) .el-input__inner[readonly]{
        background: none!important;
    }
    .el-tag--medium{
        height: 30px;
        line-height: 28px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .el-tag .el-icon-close{
        top: 0!important;
    }
</style>
          
          